<template>
	<zui-box>
		<!-- 头部导航 -->
		<zui-navbar :have_back="false" title="中森珠宝"></zui-navbar>

		<!-- 假搜索 -->
		<view class="search_box">
			<u-search shape="round"  placeholder="请输入搜索商品"  :disabled="true" :showAction="false" @click="go_search()"></u-search>
		</view>

		<!-- 轮播图 -->
		<view class="banner"><u-swiper bgColor="transparent" :list="banner" keyName="img" circular height="360rpx" radius="0" wigth="750rpx"></u-swiper></view>

		<u-gap height="30rpx"></u-gap>

		<!-- 分类九宫格 -->
		<view class="classify_list">
			<u-grid col="5" :border="false" @click="click_classify">
				<u-grid-item v-for="(item, index) in classify_list" :key="index" :name="item.id">
					<u-icon :customStyle="{ paddingTop: 10 + 'rpx' }" :name="item.cat_img" :size="35"></u-icon>
					<text class="grid-text">{{ item.cat_name }}</text>
				</u-grid-item>
			</u-grid>
		</view>

		<u-gap height="30rpx"></u-gap>

		<!-- 图文 -->
		<view class="image_text_box">
			<view class="image"><image src="@/static/img/index_img01.png"></image></view>
			<view class="text">
				<view class="the_text">今日金价</view>
				<view class="the_num">
					<text>{{ price }}</text>
					元/克</view>
			</view>
		</view>

		<u-gap height="20rpx"></u-gap>

		<!-- 标题 + 更多 -->
		<zui-title :have_icon="true" @fun="go_good_list()" color="#AA334F">值得购专区</zui-title>

		<!-- 商品列表 -->
		<view class="list">
			<view class="item" @click="go_to(item)" v-for="(item, index) in good_list" :key="index">
				<image :src="item.goods_thumb" class="image"></image>
				<view class="text">
					<view class="title u-line-1">{{ item.goods_name }}</view>
					<view class="small_text ">¥{{ Math.trunc(item.goods_price*1)}}</view>
				</view>
			</view>
		</view>

		<u-gap height="30rpx"></u-gap>

		<!-- 分享 -->
		<view class="limit" @click="xz_go('coupon_list')" ><image src="~@/static/img/limit.png" mode=""></image></view>

		<!-- <u-gap height="20rpx"></u-gap> -->
		
		<!-- 以金换金 -->
		
		<!-- 标题 + 更多 -->
		<zui-title :have_icon="true" @fun="go_swap_gold_good_list()" v-if="swap_gold_good_list.length>0" color="#AA334F">以金换金专区</zui-title>
		
		<!-- 商品列表 -->
		<view class="list">
			<view class="item" @click="go_swap_gold_to(item)" v-for="(item, index) in swap_gold_good_list" :key="index">
				<image :src="item.goods_thumb" class="image"></image>
				<view class="text">
					<view class="title u-line-1">{{ item.goods_name }}</view>
					<view class="small_text ">¥{{ Math.trunc(item.goods_price*1) }}</view>
				</view>
			</view>
		</view>
		
		<u-gap height="30rpx"></u-gap>
		
		<!-- 以金换金 -->
		
		<!-- 标题 + 更多 -->
		<zui-title :have_icon="true" @fun="go_integral_good_list()" v-if="integral_good_list.length>0" color="#AA334F">积分专区</zui-title>
		
		<!-- 商品列表 -->
		<view class="list">
			<view class="item" @click="go_integral_to(item)" v-for="(item, index) in integral_good_list" :key="index">
				<image :src="item.goods_thumb" class="image"></image>
				<view class="text">
					<view class="title u-line-1">{{ item.goods_name }}</view>
					<view class="small_text ">¥{{ Math.trunc(item.goods_price*1)  }}</view>
				</view>
			</view>
		</view>
		
		<u-gap height="30rpx"></u-gap>
		
		
		<!-- 标题 + 更多 -->
		<zui-title :have_icon="true" @fun="go_one_mouth_good_list()" v-if="one_mouth_good_list.length>0" color="#AA334F">甄选专区</zui-title>
		
		<!-- 商品列表 -->
		<view class="list">
			<view class="item" @click="go_one_mouth_to(item)" v-for="(item, index) in one_mouth_good_list" :key="index">
				<image :src="item.goods_thumb" class="image"></image>
				<view class="text">
					<view class="title u-line-1">{{ item.goods_name }}</view>
					<view class="small_text ">¥{{ Math.trunc(item.goods_price*1)  }}</view>
				</view>
			</view>
		</view>
		
		

		<zui-pop :title="Adverting.introduce" :fun="set_agree" ref="zui_pop" btntit="今日不再弹出"><image :src="Adverting.image" mode="aspectFit"></image></zui-pop>
		
	</zui-box>
</template>
<script>
export default {
	data() {
		return {
			banner: [], //轮播图
			classify_list: [], //分类类别
			price: '', //今日价格
			good_list: [], //值得够商品
			swap_gold_good_list: [], //以金换金
			Adverting: {},
			integral_good_list: [], //积分
			
			one_mouth_good_list: [], //一口价
			version:'',//版本
		};
	},
	//页面加载完毕
	onLoad(e) {},
	//每次进入页面
	onShow() {
		//获取接口
		this.step();
	},
	methods: {
		//获取接口步骤
		step() {
			//获取轮播图
			this.get_banner();
			//获取分类
			this.get_classify();
			//获取今日价格
			this.get_price();
			//获取值得购商品 前三条
			this.get_good_list();
			//获取值以金换金 前三条
			this.get_swap_gold_good_list();
			//获取积分
			this.get_integral_good_list()
			//获取一口价
			this.get_one_mouth_good_list()
			//获取版本号
			this.get_version();
		},
		//获取版本
		get_version(){
			
			// #ifdef APP-PLUS
			let that = this;
			plus.runtime.getProperty(plus.runtime.appid, function(widgetInfo) {
				let version = widgetInfo.version;
				// that.type = version;
				// let url;
				// if (that.tourist) {
				// 	url = '/app/auth/version';
				// } else {
				// 	url = '/app/user/version';
				// }
				// that.$ajax(url, 'get', {
				// 	type: 1
				// }).then(res => {
				// 	console.log('版本信息', res);
				// 	if (res.code == 1) {
				// 		if (version != res.new_version) {
				// 			that.edition(res.data.url);
				// 		}
				// 	}
				// });
				
				uni.$u.http
					.get('/app/version/getVersion', {
						params: {
							sys_version:3,
						},
						custom: {
							auth: true,
							toast: true,
							catch: true
						}
					})
					.then(res => {
						that.version = res;
						if (version != res.new_version) {
							that.edition(res.download_url);
						}
					})
					.catch(err => {});
					
					
			});
			// #endif
			
			
		
		},
		
		
		//安装更新
		edition(url) {
			console.log('当前版本号', url);
			uni.showLoading({
				title: '已有新版本,升级中...',
				mask: true
			});
			const downloadTask = uni.downloadFile({
				url: url,
				success: downloadResult => {
					if (downloadResult.statusCode === 200) {
						plus.runtime.install(
							downloadResult.tempFilePath,
							{},
							function() {
								plus.nativeUI.closeWaiting();
								console.log('安装wgt文件成功！');
								plus.nativeUI.alert('应用资源更新完成！', function() {
									plus.runtime.restart();
								});
								uni.hideLoading();
							},
							function(e) {
								plus.nativeUI.closeWaiting();
								console.log('安装wgt文件失败[' + e.code + ']：' + e.message);
								plus.nativeUI.alert('安装wgt文件失败[' + e.code + ']：' + e.message);
								uni.hideLoading();
							}
						);
					} else {
						plus.nativeUI.alert('安装wgt文件失败');
					}
				},
				fail: err => {
					plus.nativeUI.alert('下载wgt文件失败');
				}
			});
			downloadTask.onProgressUpdate(function(res) {
				console.log('下载进度' + res.progress);
				console.log('已经下载的数据长度' + res.totalBytesWritten);
				console.log('预期需要下载的数据总长度' + res.totalBytesExpectedToWrite);
			});
		},
		//获取轮播图
		get_banner() {
			// 基本用法，注意：get请求的参数以及配置项都在第二个参数中
			uni.$u.http
				.get('/app/banner/list', {
					params: {
						type:1
					},
					custom: {
						auth: true,
						toast: true,
						catch: true
					}
				})
				.then(res => {
					let arr = res;
					let banner = arr.map((item, index) => {
						return item.image; //返回值会作为储存到另一个数组当作总体的返回值
					});
					this.banner = banner;
				})
				.catch(err => {});

			uni.$u.http
				.get('/app/adverting/getAdverting', {
					params: {},
					custom: {
						auth: true,
						toast: true,
						catch: true
					}
				})
				.then(res => {
					this.Adverting = res;
					if (res.image) {
						this.$refs.zui_pop.do_open();
					}
				})
				.catch(err => {});
		},
		// 关闭广告
		set_agree() { 
			uni.$u.http
				.get('/app/adverting/closeAdverting', {
					params: {},
					custom: {
						auth: true,
						toast: true,
						catch: true
					}
				})
				.then(res => {
					console.log(res);
				})
				.catch(err => {});
		},
		get_classify() {
			// 基本用法，注意：get请求的参数以及配置项都在第二个参数中
			uni.$u.http
				.get('/app/goods/getCategoryList', {
					params: {
						is_recommend: 1
					},
					custom: {
						auth: true,
						toast: false,
						catch: false
					}
				})
				.then(res => {
					console.log('获取分类', res);
					let arr = res;
					let obj = {
						id: 999,
						is_enable: 1,
						cat_img: require('@/static/img/classify_icon.png'),
						cat_name: '分类',
						create_by: 0,
						create_time: '1970-01-01 08:00:00',
						delete_time: null,
						is_enable: 1,
						sort: 9,
						update_time: '2022-02-28 16:24:06'
					};
					arr.push(obj);

					this.classify_list = arr;
				})
				.catch(err => {});
		},

		get_price() {
			// /app/setting/getGroup
			// 基本用法，注意：get请求的参数以及配置项都在第二个参数中
			uni.$u.http
				.get('/app/setting/getSingle', {
					params: {
						group: 'gold',
						key: 'gold_price'
					},
					custom: {
						auth: true,
						toast: false,
						catch: false
					}
				})
				.then(res => {
					this.price = res.value;
				})
				.catch(err => {});
		},
		//分类跳转
		click_classify(id) {
			console.log('获取id', id);
			if (id == 999) {
				this.xz_go('classify');
			} else {
				//跳转到详情1&name=uniapp
				let name = '';
				let item = this.classify_list.find(item => item.id == id);
				name = item.cat_name;
				uni.navigateTo({ url: '/pages/index/good_list?cat_id=' + id + '&name=' + name  });
			}
		},
		
		go_search(){
			uni.navigateTo({ url: '/pages/index/search'});
		},
		
		// 值得购专区
		//获取值得 首投类型
		get_good_list() {
			// 基本用法，注意：get请求的参数以及配置项都在第二个参数中
			uni.$u.http
				.get('/app/goods/list', {
					params: {
						is_recommend:1,
						module_id: 2
					},
					custom: {
						auth: true,
						toast: false,
						catch: false
					}
				})
				.then(res => {
					this.good_list = res.list;
				})
				.catch(err => {});
		},
		go_good_list() {
			uni.navigateTo({ url: '/pages/index/good_list?module_id=2&name=值得购专区' });
		},
		go_to(item) {
			uni.navigateTo({ url: '/pages/index/good_item?id=' + item.id });
		},
		// 以金换金
		//获取以金换金 1- 手工艺
		get_swap_gold_good_list() {
			// 基本用法，注意：get请求的参数以及配置项都在第二个参数中
			uni.$u.http
				.get('/app/goods/list', {
					params: {
						is_recommend:1,
						module_id: 1
					},
					custom: {
						auth: true,
						toast: false,
						catch: false
					}
				})
				.then(res => {
					this.swap_gold_good_list = res.list;
				})
				.catch(err => {});
		},
		go_swap_gold_good_list() {
			uni.navigateTo({ url: '/pages/index/good_list?module_id=1&name=以金换金专区' });
		},
		go_swap_gold_to(item) {
			uni.navigateTo({ url: '/pages/index/good_item?id=' + item.id });
		},
		
		//获取积分
		get_integral_good_list() {
			// 基本用法，注意：get请求的参数以及配置项都在第二个参数中
			uni.$u.http
				.get('/app/integral/list', {
					params: {
						is_recommend:1,
					},
					custom: {
						auth: true,
						toast: false,
						catch: false
					}
				})
				.then(res => {
					this.integral_good_list = res.list;
				})
				.catch(err => {});
		},
		
		go_integral_good_list() {
			uni.navigateTo({ url: '/pages/integral/good_list?module_id=1&name=金豆专区' });
		},
		 
		 go_integral_to(item) {
			uni.navigateTo({ url: '/pages/integral/good_item?id=' + item.id });
		},
		
		
		get_one_mouth_good_list() {
			// 基本用法，注意：get请求的参数以及配置项都在第二个参数中
			uni.$u.http
				.get('/app/product/list', {
					params: {
						is_recommend: 1
					},
					custom: {
						auth: true,
						toast: false,
						catch: false
					}
				})
				.then(res => {
					this.one_mouth_good_list = res.list;
				})
				.catch(err => {});
		},
		
		go_one_mouth_good_list() {
			uni.navigateTo({ url: '/pages/one_mouth/good_list?module_id=1&name=甄选专区' });
		},
		 
		 go_one_mouth_to(item) {
			uni.navigateTo({ url: '/pages/one_mouth/good_item?id=' + item.id });
		},
		
	}
};
</script>
<style lang="scss" scoped>
//广告
/deep/.content {
	height: 640rpx !important;
	.scroll {
		height: 400rpx !important;
	}
	image {
		width: 100%;
		height: 320rpx;
	}
}

//假搜索
.search_box {
	width: 750rpx;
	margin: 0 auto;
	border-radius: 4rpx;
	display: flex;
	align-items: center;
	padding: 30rpx;
	box-sizing: border-box;
}

//轮播图
.banner {
	/deep/.u-swiper__wrapper__item__wrapper {
		// padding: 0 24rpx !important;
		width: 690rpx !important;
		margin: 0 auto !important;
		border-radius: 20rpx;
		overflow: hidden;
	}
}

//分类九宫格
.classify_list {
	color: #414141;
	.grid-text {
		font-size: 24rpx;
		line-height: 3;
	}

	/deep/.u-icon__img {
		height: 70rpx !important;
		width: 70rpx !important;
	}
}

//图文展示
.image_text_box {
	width: 670rpx;
	height: 148rpx;
	margin: 0 auto;
	position: relative;

	.image {
		width: 670rpx;
		height: 148rpx;
		position: absolute;

		image {
			width: 100%;
			height: 100%;
		}
	}

	.text {
		position: absolute;
		display: flex;
		align-items: center;
		justify-content: center;
		flex-flow: column;
		width: 670rpx;
		height: 148rpx;

		.the_text {
			color: #ffe5a5;
			font-size: 24rpx;
			margin-bottom: 10rpx;
		}

		.the_num {
			text{
				font-size: 34rpx;
				font-weight: 800;
				margin-right: 5rpx;
			}
			color: #ffe5a5;
			font-size: 24rpx;
		}
	}
}

// 商品列表

.list {
	width:700rpx;
	margin: 0 auto;
	display: flex;
	flex-wrap: wrap;
	justify-content: flex-start;
	
	.item {
		box-sizing: border-box;
		padding: 30rpx 0;
		
		font-size: 28rpx;
		border-radius: 5px;
		position: relative;
		
		overflow: hidden;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		background: #fff;
		
		 width: 30%;
		 margin: 0 1.66%;
		margin-bottom: 25rpx;
		 
		 
	}

	.image {
		flex-shrink: 0;
		margin-bottom: 30rpx;
		border-radius: 8rpx;
		width: 160rpx;
		height: 160rpx;
		display: block;
	}

	.text {
		width: 100%;
		text-align: center;
		.title {
			color: #272727;
			line-height: 60rpx;
			font-size: 28rpx;
		}

		.small_text {
			color: #e63a2a;
			line-height: 60rpx;
			font-size: 26rpx;
		}
	}
}

//图片
.limit {
	width: 670rpx;
	height: 172rpx;
	margin: 0 auto;

	image {
		width: 100%;
		height: 100%;
	}
}
</style>
